import React, { Component, useEffect } from 'react'
import { Button, Form, Input, Cascader, Select } from 'antd'
import { SendOutlined, SaveOutlined } from "@ant-design/icons"
import { observer } from 'mobx-react-lite'
import useStore from '@/context/useStore';

import styles from './addProject.less'
const { Option } = Select;
const children: any = [];
// for (let i = 10; i < 36; i++) {
//     children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
// }

function handleChange(value: string) {
    console.log(`selected ${value}`);
}
const options = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
            {
                value: 'hangzhou',
                label: 'Hangzhou',

            },
        ],
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
            {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                ],
            },
        ],
    },
];

function onChange(value: string) {
    console.log(value);
}

const addProject: React.FC = () => {
    let { proManagement } = useStore();
    useEffect(() => {
        //getLabellist
        console.log(proManagement.getproManagement)
        console.log(proManagement.getLabellist)
    }, [])


    return <div className={styles.big}>
        <section className={styles.top}>
            <h2>添加项目</h2>
            <div className={styles.but}>
                <Button>返回</Button>
                <Button type="primary" icon={<SendOutlined />}>
                    提交审核
                        </Button>
            </div>
        </section>
        <section className={styles.center}>
            <div className={styles.title}>
                <h2>基本信息</h2>
                <Button icon={<SaveOutlined />} style={{ border: 'none', fontSize: '16px', color: 'rgb(103,156,246)' }} htmlType="submit">
                    保存
                        </Button>

            </div>
            <section className={styles.normal}>
                <div className={styles.left}>
                    <div className={styles.one}>
                        <Form.Item label="项目名称" style={{ fontSize: '20px' }} name="degenceName" className={styles.name} rules={[{ required: true, message: "请输入答辩名称" }]}>
                            <Input className={styles.option} />
                        </Form.Item>
                        <Form.Item label="版本 V" name="degenceName" className={styles.bb} rules={[{ required: true }]}>
                            <Input className={styles.options} />
                        </Form.Item>
                    </div>
                    <div className={styles.two}>
                        <Input placeholder="请输入项目简介" className={styles.inputt} />
                    </div>
                    <div className={styles.three}>
                        <div className={styles.small}>
                            <h3>* 专业</h3><Cascader options={proManagement.getproManagement} className={styles.sencond} onChange={(e) => onChange} placeholder="Please select" />
                        </div>
                        <div className={styles.little}>
                            <p>* 行业</p>
                            <Select
                                mode="multiple"
                                allowClear
                                style={{ width: '100%' }}
                                placeholder="Please select"
                                className={styles.select}
                                onChange={handleChange}
                            >
                                {
                                    proManagement.getLabellist.map(item => {
                                        return <Option key={item.value} value={item.label}>{item.label}</Option>
                                    })
                                }
                            </Select>
                        </div>

                    </div>
                    <div className={styles.four}>
                        <section>
                            <h3>*实训类型</h3>
                            <Select defaultValue="lucy" className={styles.select} style={{ width: '180px', height: '50px' }} onChange={handleChange}>
                                <Option value="jack">生产实训</Option>
                                <Option value="lucy">教学实训</Option>
                                <Option value="disabled">
                                    专业群实训
      </Option>
                            </Select>
                        </section>
                        <Form.Item label="预期总工时" name="stationVersion" rules={[{ required: true, message: "预期总工时" }]}>
                            <Input type="number" className={styles.adds}/>
                        </Form.Item>

                    </div>
                    <div className={styles.five}></div>

                </div>
                <div className={styles.right}></div>

            </section>
        </section>
    </div>
}
export default observer(addProject)